/**
 *
 * @authors cherish yii2 (cherish@cherish.pw)
 * @date    2021-07-28 12:48:28
 * @version v2.0
 * @description the core js of todolist project
 *
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试！
// ...

var title, todolist, donelist, todocount, donecount;
var list = {
  todolist: [],
  donelist: [],
}

init();
function init() {
    // 获取元素
  title = document.querySelector("#title");
  todolist = document.querySelector("#todolist");
  donelist = document.querySelector("#donelist");
  todocount = document.querySelector("#todocount");
  donecount = document.querySelector("#donecount");
    //添加点击事件
    //  输入内容回车添加
  document.addEventListener("keydown", add);
    //  将待办事项加入完成事项
  todolist.addEventListener("change", changeHandler);
    //  将待办事项删除
  todolist.addEventListener("click", remove);
      //  将完成事项加入待办事项
  donelist.addEventListener("change", changeHandler);
      //  将完成事项删除
  donelist.addEventListener("click", remove);
    // 将对象保存到本地存储
  if (localStorage.list) {
    list = JSON.parse(localStorage.list);
    render();
  }
}

/**
 * 添加代办事项
 */
function add(e) {
  //验证按下的是否为回车与长度去除空格后是否为0
  if (e.keyCode !== 13 || title.value.trim().length === 0) return;
  //输入框内容放入待办事项的对象(todolist)
  list.todolist.push(title.value);
  //输入框清空
  title.value = "";
  // 渲染
  render();
}

// 点击多选框切换在哪个列表
function changeHandler(e) {
  if (e.target.type !== "checkbox") return;
  switchList(e.target, e.target.checked);
}

//切换列表
function switchList(target, bool, remove) {
    var arr = bool ? list.todolist : list.donelist;
    var arr1 = bool ? list.donelist : list.todolist;
    // 如果remove没有给值，target-->checkbox,elem为p标签，删除并添加给另一个列表
    // 如果remove有值，target-->a,elem为p标签，只删除，不添加
    var elem =
      remove === undefined
        ? target.nextElementSibling
        : target.previousElementSibling;
    var index = arr.indexOf(elem.textContent);
    // 从下标index开始删除1个元素，并且返回这个被删除的元素组成的新数组
    var del = arr.splice(index, 1);
    if (remove === undefined) arr1.push(del[0]);
    // 根据这个列表重新渲染todolist和donelist
    render();
  }
/**
 * 编辑代办事项
 */
function edit() {
  console.log("edit method ^_^");
}

/**
 * 移除代办事项
 */
 function remove(e) {
    if (e.target.nodeName !== "A") return;
    switchList(
      e.target,
      !e.target.parentElement.firstElementChild.checked,
      true
    );
  }

// 渲染函数
function render() {
    // 将list对象转为字符串格式放入本地存储
  localStorage.list = JSON.stringify(list);

  for (var k in list) {
    window[k].innerHTML = list[k].reduce((value, item) => {
      return (
        value +
        `
                <li>
                    <input type="checkbox" ${
                      k === "donelist" ? "checked" : ""
                    }/>
                    <p onclick="edit(1)">${item}</p>
                    <a href="javascript:remove(1)">-</a>
                </li>
                `
      );
    }, "");
  }
  // 存储列表数量
  todocount.textContent = list.todolist.length;
  donecount.textContent = list.donelist.length;
}
/**
 * 跨域解决方案代码/配置粘贴处（请粘贴在块状注释范围内）

 */
